<template>
  <div class="findContainer">
    <a-tabs default-active-key="1" @change="callback" size="small" :tabBarGutter="1">
      <a-tab-pane key="1" tab="个性推荐">
        <recommendation ref="recommendation"></recommendation>
      </a-tab-pane>
      <a-tab-pane key="2" tab="专属定制">
        专属定制
      </a-tab-pane>
      <a-tab-pane key="3" tab="歌单">
        歌单
      </a-tab-pane>
      <a-tab-pane key="4" tab="排行榜">
        排行榜
      </a-tab-pane>
      <a-tab-pane key="1004" tab="歌手">
        歌手
      </a-tab-pane>
      <a-tab-pane key="1006" tab="最新音乐">
        最新音乐
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import Recommendation from "@/components/web/content/content/findMusic/Recommendation";
export default {
  name: "FindMusic",
  components:{
    Recommendation
  },
  data() {
    return {}
  },
  methods: {
    callback(key) {
      console.log(key);
    },
  }
}
</script>

<style scoped>

::v-deep .ant-tabs-nav .ant-tabs-tab-active {
  color: black;
}

::v-deep .ant-tabs-nav .ant-tabs-tab:active {
  color: black;
}

::v-deep .ant-tabs-nav .ant-tabs-tab:hover {
  color: black;
}

::v-deep .ant-tabs-ink-bar {
  background-color: red;
}
</style>
